<template>
  <view>
    <!-- 搜索框区域 -->
    <view class="search-box">
      <uni-search-bar @input="input" :radius="100" :cancelButton="none">
      </uni-search-bar>
    </view>
    <!-- 商品列表区域 -->
    <view class="sugg-list" v-if="searchResult.length !== 0">
      <view class="sugg-item" v-for="(item,index) of searchResult" :key="index" @click="gotoGoodsDetail(item.goods_id)">
        <view class="goods-name">
          {{item.goods_name}}
        </view>
        <uni-icons type="arrowright" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史信息区域 -->
    <view class="history-box" v-else>
      <view class="history-title">
        <text>搜索历史</text>
        <uni-icons type="trash-filled" size="17" @click="clear"></uni-icons>
      </view>
      <view class="history-list">
        <uni-tag :text="item" v-for="(item,index) of historys" :key="index" @click="gotoGoodsList(item)"></uni-tag>
      </view>
      
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return { 
        timer: null,            //延时器的id
        kw: '',                 //搜索的关键词
        searchResult:[],       //搜索的查询结果
        historyList: []        //搜索历史列表
      }
    },
    onLoad(){
      //获取持久化的历史数据
      this.historyList = JSON.parse(uni.getStorageSync('storage_key') || '[]')
    },
    computed:{
      //计算属性反转历史列表的数据
      historys(){
        return [...this.historyList].reverse()
      }
    },
    methods: {
      //value值发生改变时，触发该事件：
      input(e){
        //过了定时器的时间就将定时器进行清除：
        clearTimeout(this.timer)
        //获取输入的值： e.value
        this.timer = setTimeout(()=>{
          //将输入的内容赋值给关键词
          this.kw = e.value     
          //触发搜索的方法：
          this.getSearchList()
        },500)
      },
      //搜索的方法
      async getSearchList(){
        //判断关键词是否为空：
        if(this.kw.length === 0){
          this.searchResult = []
          return
        }
        //关键词不为空时,获取关键词列表信息并将关键词保存到历史列表当中：
        const {data:res} = await uni.$http.get("/api/public/v1/goods/qsearch",{query:this.kw})
        if(res.meta.status !== 200) return uni.$showMsg()
        this.searchResult = res.message
        
        //调用保存关键词的方法：
        this.saveSearchHistory()
      },
      //点击商品列表的信息跳转到商品的详情页：
      gotoGoodsDetail(goods_id){
        uni.navigateTo({
          url: "/subpck/goods_detail/goods_detail?goods_id="+goods_id
        })
      },
      //保存搜索关键词的方法：
      saveSearchHistory(){
        //this.historyList.push(this.kw)
        // 1. 将 Array 数组转化为 Set 对象
        const set = new Set(this.historyList)
        // 2. 调用 Set 对象的 delete 方法，移除对应的元素
        set.delete(this.kw)
        // 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
        set.add(this.kw)
        // 4. 将 Set 对象转化为 Array 数组
        this.historyList = Array.from(set)
        //5. 对历史数据进行持久化存储：
        uni.setStorageSync('kw', JSON.stringify(this.historyList));
      },
      //清空搜索记录
      clear(){
        // 清空 data 中保存的搜索历史
        this.historyList = []
        // 清空本地存储中记录的搜索历史
        uni.setStorageSync('kw', '[]')
      },
      //点击搜索历史跳转到商品列表页面
      gotoGoodsList(kw){
        uni.navigateTo({
          url: '/subpck/goods_list/goods_list?query='+kw
        })
      }
    }
  }
</script>

<style lang="scss">
  .search-box {
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .sugg-list{
    padding: 0 5px;
    .sugg-item{
      display: flex;
      align-items: center;
      border-bottom: 1px solid #efefef;
      justify-content: space-between;
      font-size: 12px;
      padding: 13px 0;
      .goods-name{
        white-space: nowrap;
        overflow: hidden;
        text-overflow:ellipsis;
        margin-right: 3px;
      }
    }
  }
  .history-box{
    padding: 0 5px;
    .history-title{
      font-size: 13px;
      padding: 15px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #efefef;
    }
    .history-list{
      display: flex;
      flex-wrap: wrap;
      uni-tag{
        margin-top: 5px;
        margin-right: 5px;
      }
    }
  }
</style>
